<template>
  <div :id="'image-' + field.name">
    <div v-if="field.label">
      <q-icon name="stars" size="sm" color="grey-7" class="q-mr-sm" />
      <span class="text-grey-7 text-bold" style="font-size: 1.1em" >{{field.label}}</span>
    </div>
    <q-separator class="q-mb-md" />
    <imageView ref="view" v-model:views="images" :readonly="!!field.readonly" :limit="field.limit || 0" />
    <div class="hint" v-if="field.hint">{{ field.hint }}</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import imageView from 'src/components/ImageView.vue';

export default defineComponent({
  name: 'fieldImage',
  emits: ['update:modelValue'],
  components: {
    imageView
  },
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  methods: {
    submit () {
      return new Promise((resolve, reject) => {
        this.$refs.view.do().then(ret => {
          this.field.value = ret;
          resolve({ name: this.field.name || this.field.ref, value: ret });
        });
      })
    }
  },
  computed: {
    /* images () {
      let images = !this.field.value ? [] : this.field.value;
      if (typeof images === 'string') {
        images = JSON.parse(images);
      } else {
        images = JSON.parse(JSON.stringify(images));
      }
      return images;
    } */
    images: {
      get () {
        let images = !this.field.value ? [] : this.field.value;
        if (typeof images === 'string') {
          images = JSON.parse(images);
        } else {
          images = JSON.parse(JSON.stringify(images));
        }
        return images;
      },
      set (val) {
        if (this.field.forPopup) { // 配合DetailTable里的popup使用
          this.field.value = val;
          this.$emit('update:modelValue', val);
        }
      }
    }
  }
});

</script>
